<template>
  <a-modal
    v-model:visible="visible"
    title="设置多账户出价"
    width="800px"
    :maskClosable="false"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <div class="modal-content">
      <div v-if="!accounts.length" class="empty-accounts">
        暂无可配置的账户
      </div>
      <div v-else class="account-list">
        <div class="account-bid-header">
          <div class="header-title">账户名称</div>
          <div class="header-title">出价方式</div>
          <div class="header-title">出价</div>
        </div>
        <div v-for="account in accounts" :key="account.id" class="account-bid-item">
          <div class="account-info">
            <div class="account-name">{{ account.name }}</div>
            <div class="account-id">ID: {{ account.id }}</div>
          </div>
          <div class="bid-type-selector">
            <a-select 
              :value="getBidType(account.id)"
              style="width: 120px;"
              @change="(value) => handleBidTypeChange(account.id, value)"
            >
              <a-select-option value="NORMAL_BID">正常出价</a-select-option>
              <a-select-option value="RANDOM_BID">随机出价</a-select-option>
              <a-select-option value="GRADIENT_BID">梯度出价</a-select-option>
            </a-select>
          </div>
          <div class="bid-value-input">
            <!-- 正常出价 -->
            <a-input-number
              v-if="bidSettings[account.id]?.type === 'NORMAL_BID'"
              v-model:value="normalBidValues[account.id]"
              :min="3"
              :max="9999"
              :precision="2"
              style="width: 120px"
              addon-after="元"
              @change="(value) => updateNormalBidValue(account.id, value)"
            />
            
            <!-- 随机出价和梯度出价 -->
            <div 
              v-else
              class="range-input"
            >
              <a-input-number
                :value="getBidRangeMin(account.id)"
                :min="3"
                :max="9999"
                :precision="2"
                style="width: 120px"
                @change="(value) => updateRangeBidMin(account.id, value)"
              />
              <span class="range-separator">-</span>
              <a-input-number
                :value="getBidRangeMax(account.id)"
                :min="getBidRangeMin(account.id) || 3"
                :max="9999"
                :precision="2"
                style="width: 120px"
                @change="(value) => updateRangeBidMax(account.id, value)"
              />
              <span class="addon-text">元</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, reactive, defineEmits } from 'vue';

// 定义组件事件
const emit = defineEmits(['update']);

// 弹框可见性
const visible = ref(false);

// 账户列表
const accounts = ref<any[]>([]);

// 各账户的出价设置
const bidSettings = reactive<Record<number, { type: string; value: any }>>({});

// 正常出价的值存储
const normalBidValues = reactive<Record<number, number>>({});

// 范围出价的值存储
const rangeBidValues = reactive<Record<number, { min: number; max: number }>>({});

// 打开弹框
const show = (currentBidMap: any, accountList: any[] = []) => {
  visible.value = true;
  accounts.value = accountList;
  
  // 初始化各账户的出价设置
  accounts.value.forEach(account => {
    const accountId = account.id;
    
    // 获取当前账户的出价设置，如果没有则使用统一设置
    const accountSetting = currentBidMap[accountId] || currentBidMap.unified || {
      type: "NORMAL_BID",
      value: 66
    };
    
    // 设置账户出价类型
    bidSettings[accountId] = {
      type: accountSetting.type,
      value: accountSetting.value
    };
    
    // 根据出价类型设置对应的值
    if (accountSetting.type === "NORMAL_BID") {
      normalBidValues[accountId] = accountSetting.value;
    } else {
      rangeBidValues[accountId] = {
        min: accountSetting.value.min,
        max: accountSetting.value.max
      };
    }
  });
};

// 处理出价类型变更
const handleBidTypeChange = (accountId: number, type: string) => {
  // 更新出价类型
  bidSettings[accountId].type = type;
  
  // 根据新类型初始化对应的值
  if (type === "NORMAL_BID") {
    if (!normalBidValues[accountId]) {
      normalBidValues[accountId] = 66;
    }
    
    bidSettings[accountId].value = normalBidValues[accountId];
  } else {
    if (!rangeBidValues[accountId]) {
      rangeBidValues[accountId] = { min: 3, max: 100 };
    }
    
    bidSettings[accountId].value = rangeBidValues[accountId];
  }
};

// 更新正常出价的值
const updateNormalBidValue = (accountId: number, value: number) => {
  normalBidValues[accountId] = value;
  
  if (bidSettings[accountId]?.type === "NORMAL_BID") {
    bidSettings[accountId].value = value;
  }
};

// 更新范围出价的最小值
const updateRangeBidMin = (accountId: number, value: number) => {
  if (!rangeBidValues[accountId]) {
    rangeBidValues[accountId] = { min: value, max: Math.max(value + 5, 10) };
  } else {
    rangeBidValues[accountId].min = value;
    
    // 确保最大值不小于最小值
    if (rangeBidValues[accountId].max < value) {
      rangeBidValues[accountId].max = value;
    }
  }
  
  if (bidSettings[accountId]?.type !== "NORMAL_BID") {
    bidSettings[accountId].value = { ...rangeBidValues[accountId] };
  }
};

// 更新范围出价的最大值
const updateRangeBidMax = (accountId: number, value: number) => {
  if (!rangeBidValues[accountId]) {
    rangeBidValues[accountId] = { min: 3, max: value };
  } else {
    rangeBidValues[accountId].max = value;
  }
  
  if (bidSettings[accountId]?.type !== "NORMAL_BID") {
    bidSettings[accountId].value = { ...rangeBidValues[accountId] };
  }
};

// 获取账户的出价类型
const getBidType = (accountId: number): string => {
  return bidSettings[accountId]?.type || "NORMAL_BID";
};

// 获取范围出价的最小值
const getBidRangeMin = (accountId: number): number => {
  return rangeBidValues[accountId]?.min || 3;
};

// 获取范围出价的最大值
const getBidRangeMax = (accountId: number): number => {
  return rangeBidValues[accountId]?.max || 10;
};

// 确认按钮处理
const handleOk = () => {
  // 构建最终的数据格式
  const finalBidMap: Record<string, any> = {
    unified: {
      type: "NORMAL_BID",
      value: 66
    }
  };
  
  // 添加各账户的设置
  accounts.value.forEach(account => {
    const accountId = account.id;
    
    if (bidSettings[accountId]) {
      finalBidMap[accountId] = {
        type: bidSettings[accountId].type,
        value: bidSettings[accountId].value
      };
    }
  });
  
  // 发送更新事件
  emit('update', finalBidMap);
  
  // 关闭弹框
  visible.value = false;
};

// 取消按钮处理
const handleCancel = () => {
  visible.value = false;
};

// 暴露组件方法
defineExpose({
  show
});
</script>

<style scoped lang="less">
.modal-content {
  max-height: 600px;
  overflow-y: auto;
}

.empty-accounts {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  color: #999;
}

.account-list {
  width: 100%;
}

.account-bid-header {
  display: flex;
  padding: 8px 16px;
  background-color: #fafafa;
  border-radius: 4px;
  margin-bottom: 8px;
  font-weight: bold;
}

.header-title {
  flex: 1;
  text-align: center;
}

.header-title:first-child {
  flex: 1.2;
  text-align: left;
}

.account-bid-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  margin-bottom: 8px;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
}

.account-info {
  flex: 1.2;
}

.account-name {
  font-weight: bold;
  margin-bottom: 4px;
}

.account-id {
  color: #999;
  font-size: 12px;
}

.bid-type-selector {
  flex: 1;
  text-align: center;
}

.bid-value-input {
  flex: 1;
  display: flex;
  justify-content: center;
}

.range-input {
  display: flex;
  align-items: center;
}

.range-separator {
  margin: 0 8px;
  color: #999;
}

.addon-text {
  margin-left: 8px;
  color: #999;
}
</style>
